<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--仓库盘存信息-->
			<view class="detail-item">
				<uni-section title="仓库盘存信息" type="line"></uni-section>
				<view class="detail-content">
					<view class="detail-text">
						盘存单号：
						<text>{{info.number}}</text>
						<text class="detail-text-copy" @click="copyText(info.number)">复制</text>
					</view>
					<view class="detail-text">仓库名称：<text>{{info.warehouseName}}</text></view>
					<view class="detail-text">盘存用户：<text>{{info.userName}}</text></view>
					<view class="detail-text">盘前未结数：<text>{{info.backlogStart}}</text></view>
					<view class="detail-text">盘后未结数：<text>{{info.backlogEnd}}</text></view>
					<view class="detail-text">开始盘存时间：<text>{{info.createTime}}</text></view>
					<view class="detail-text">盘存说明：<text>{{info.remark}}</text></view>
					<view class="detail-text">
						状态：
						<uni-tag size="small" :class="`status-${info.status}`" :text="arrText(warehouseStorageTakeStatusList, info.status)" />
					</view>
				</view>
			</view>
			<!--仓库盘存商品-->
			<view class="detail-item" v-if="checkPermi(['zhouyz:warehouseStorageTakeDetail:list'])">
				<uni-section title="仓库盘存商品" type="line"></uni-section>
				<view class="detail-content table">
					<ty-table
						:data="tableList"
						:columns="columns"
						:sortable="true"
						:cellClassName="() => 'table-cell'"
						:headerCellClassName="() => 'table-cell'"
						stripe
						border>
						<template v-slot:moreSpec="{row}">
							<uni-tag size="small" type="success" :text="row.moreSpec === 0 ? '单规格' : '多规格'" />
						</template>
					</ty-table>
					<!--分页-->
					<view class="pagination" v-show="total > 0">
						<ty-pagination
							:total="total"
							:pageSize="pageSize"
							:currentPage="pageNum"
							:pageSizes="[10, 20, 30, 50]"
							mode="simple"
							layout="first,prev,page,next,last"
							@sizeChange="sizeChange"
							@change="pageChange">
						</ty-pagination>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { warehouseStorageTakeDetail, lossAndOverflowProductDetail } from "@/api/erp_api/warehouse"
import { copyText, arrText, getEdgeMonthFirstDay } from '@/utils/ty.js';
import { warehouseStorageTakeStatusList } from '@/utils/config.js'
import useUserStore from '@/store/modules/user'

	const userStore = useUserStore()	
	onLoad(async (option) => {
		if (option.id) {
			id.value = option.id
			getDetail()
			if (checkPermi(['zhouyz:warehouseStorageTakeDetail:list'])) {
				getProductDetail()
			}
		}
	})
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const userInfo = ref({})
	const pageNum = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const tableList = ref([])
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		warehouseStorageTakeDetail(params).then(res => {
			info.value = res.data || {}
			isLoading.value = false
			uni.hideLoading()
	  }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	//页数切换
	const pageChange = (page) => {
		pageNum.value = page
		getProductDetail()
	}
	
	//每页条数切换
	const sizeChange = (size) => {
		pageSize.value = size
		getProductDetail()
	}
	
	// 表格头部
	const columns = ref([
		{ title: '商品名称', key: 'productName' },
		{ title: '规格标志', key: 'moreSpec', width: '100rpx' },
		{ title: '商品批次号', key: 'batchNumber' },
		{ title: '盘存前数量', key: 'beforeNumber', width: '120rpx' },
		{ title: '盘存后数量', key: 'afterNumber', width: '120rpx' }
	])
	
	const getProductDetail = () => {
		const params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			startTime: getEdgeMonthFirstDay(-1),
			endTime: getEdgeMonthFirstDay(1)
		}
		lossAndOverflowProductDetail(id.value, params).then(res => {
			tableList.value = res.rows || []
			total.value = res.total
    })
	}
	
</script>

<style scoped>
	.status-0 {
		background-color: #13ce66;
		border-color: #13ce66;
	}
	.status-1 {
		background-color: #ff4949;
		border-color: #ff4949;
	}
</style>
